<template>
  <div class="total-users">
    <FirstCommonComp title="累计用户数" :value="Number(reportData.totalUser)">
      <template #default>
        <v-chart :option="option"></v-chart>
      </template>
      <template #footer>
        <div>
          <span>日同比</span>
          <span class="sales">{{ reportData.userGrowLastDay }}%</span>
          <span class="up"></span>
          <span class="right">月同比</span>
          <span class="sales">{{ reportData.userGrowLastMonth }}%</span>
          <span class="up"></span>
        </div>
      </template>
    </FirstCommonComp>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import FirstCommonComp from './FirstCommonComp.vue'

const props = defineProps({
  reportData: {
    type: Object,
    required: true,
  },
})

const createRenderItem = (userLastMonth) => {
  return function (params, api) {
    const barTopCenter = api.coord([userLastMonth, 0])
    return {
      type: 'group',
      children: [
        {
          type: 'polygon',
          shape: {
            points: [
              [barTopCenter[0], barTopCenter[1] - 10],
              [barTopCenter[0] + 5, barTopCenter[1] - 18],
              [barTopCenter[0] - 5, barTopCenter[1] - 18],
            ],
          },
          style: {
            fill: 'green',
            lineWidth: 1,
          },
        },
        {
          type: 'polygon',
          shape: {
            points: [
              [barTopCenter[0], barTopCenter[1] + 10],
              [barTopCenter[0] + 5, barTopCenter[1] + 18],
              [barTopCenter[0] - 5, barTopCenter[1] + 18],
            ],
          },
          style: {
            fill: 'green',
            lineWidth: 1,
          },
        },
      ],
    }
  }
}

const option = ref({
  xAxis: {
    type: 'value',
    show: false,
    min: 0,
    max: 160,
  },
  yAxis: {
    type: 'category',
    show: false,
    data: [''],
  },
  grid: {
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
  series: [
    {
      type: 'bar',
      stack: 'total',
      data: [],
      barWidth: 10,
      itemStyle: {
        color: 'green',
      },
    },
    {
      type: 'bar',
      stack: 'total',
      data: [],
      barWidth: 10,
      itemStyle: {
        color: '#eee',
      },
    },
    {
      type: 'custom',
      data: [0],
      renderItem: createRenderItem(0)
    },
  ],
})
watch(() => props.reportData,(newData) => {
  option.value.series[0].data = [newData.userLastMonth]
  option.value.series[1].data = [newData.userToday]

  option.value.series[2].renderItem = createRenderItem(newData.userLastMonth)
})
</script>

<style scoped>
.right {
  margin-left: 8px;
}
</style>
